<div nz-row>
  <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">
  </div>
  <div nz-col nzXs="20" nzSm="16" nzMd="12" nzLg="8" nzXl="4">
    <div class="logo"> logo</div>
    <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixUser">
            <input type="text" nz-input formControlName="userName" placeholder="{{'login.name' | translate}}">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('userName').dirty && validateForm.get('userName').errors">{{'login.name.check' | translate}}</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixLock">
            <input type="password" nz-input formControlName="password" placeholder="{{'login.password' | translate}}">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">{{'login.password.check' | translate}}</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <label nz-checkbox formControlName="remember">
            <span>{{'login.remember' | translate }}</span>
          </label>
          
          <button nz-button class="login-form-button" [nzType]="'primary'">{{'login' | translate }}</button>
          <a href="">{{'login.register' | translate}} </a>
          <a class="login-form-forgot">{{'login.forgot' | translate }}</a>
        </nz-form-control>
      </nz-form-item>
    </form>
    <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
    <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>
  </div>
  <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">
  </div>
</div>

